<!--conf
<sample>
	<product version="1.0" edition="std"/>
	<modifications>
		<modified date="080205"/>
	</modifications>
<sampledescription><![CDATA[Paginal output makes it possible to load big number of items into Folders and still have good performance. It also provides the possibility to load additional content from server when it is necessary.]]></sampledescription></sample>
 --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Enable paginal output</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script src="./types/ftypes.js" type="text/javascript"></script>
  
	<link rel="STYLESHEET" type="text/css" href="./types/ftypes.css">  
	<script>
		dhtmlx.image_path = "../../../codebase/imgs/"
		var data;
		var pager;
		function doOnLoad(){
			data = new dhtmlXDataView("data_container");
			changeType("ficon");
			pager = data.define("pager",{
				container:"pager"
			});
			
			data.load("../common/files_ext.xml");
		}
		
		function changeType(type){
			data.define("type",type);
			data.customize({
				icons_src_dir:"../common/images"
			});
		}
		
		function enablePaging(n){
			pager.define("size",n);
			pager.refresh();
		}
	</script>	
<body onload="doOnLoad()">
	<h1>Initialize object on page</h1>
	<div style="position:relative;">
		<img src="../common/images/samples_frame.gif" width="436" height="513" alt="" border="0">
		<div id="data_container" style="width:396px;height:396px;overflow:hidden;position:absolute;top:65px;left:20px;border:0px solid red;"></div>
		<div id="pager" class="pager" style="position:absolute;top:470px;left:20px;width:396px; height:20px;"></div>
	</div>
	
	<input type="radio" name="switch1" onclick="enablePaging(5)"> Enable Paging with 5 items per page<br>
	<input type="radio" name="switch1" onclick="enablePaging(10)" selected="true"> Enable Paging with 10 items per page<br>
	
	
	<h3>Paging state remains while changing types</h3>
	<input type="radio" name="switch" onclick="changeType(this.value)" value="ficon" checked> F-icon<br>
	<input type="radio" name="switch" onclick="changeType(this.value)" value="ftiles"> F-titles<br>
	<input type="radio" name="switch" onclick="changeType(this.value)" value="ftable"> F-table<br>


</body>
</html>

